//点击切换   自动轮播   3D展示
var oImg = $('img');   //$  相当于Document.getElementById()
//console.log(oImg);

//展示图片的索引
var curDisplay = 0;
var len = oImg.length;
//
var timer;

function init(){
	show();
	bindEvent();
	autoplay();
}

init();

//每一张图片分散  左边  中间  右边
function show(){
	var hLen = Math.floor(len / 2);
	//图片分散到2边   lNumIndex   rNumIndex
	var lNum, rNum;
	//console.log(oImg.eq(0).attr('src'),oImg.eq(-1).attr('src'))
	
	for(var i = 0; i < hLen; i++){
		lNum = curDisplay - i - 1;
		oImg.eq(lNum).css({
transform:'translateX(' + (-150 *(i + 1)) + 'px) translateZ(' + (200 - i*100) + 'px) rotateY(30deg)'
		});
		
		rNum = curDisplay + i + 1;
		//判断临界
		if(rNum > len -1){
			rNum -= len;
		}
		
		oImg.eq(rNum).css({
transform:'translateX(' + (150 *(i + 1)) + 'px) translateZ(' + (200 - i*100) + 'px) rotateY(-30deg)'
		});
	};
	oImg.eq(curDisplay).css({
		transform:'translateZ(300px)'
	})
}

function bindEvent(){
	oImg.on('click',function(){
		curDisplay = $(this).index();
		show();
	}).hover(function(){
		clearInterval(timer);
	},function(){
		autoplay();
	});
}

function autoplay(){
	clearInterval(timer);
	timer = setInterval(function(){
		if(curDisplay == len - 1){
			curDisplay = 0;
		}else{
			curDisplay ++;
		}
		show();
	},2000);
}	
